<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>debounce</title>
</head>

<body>
  <div style="width: 100%;height: 1200px;background-color: #bbffaa;" id="docv"></div>

</body>

<script>
  // const debounce = (fn, delay) => {
  //   let timer = null
  //   return () => {
  //     if (timer) {
  //       clearTimeout(timer)
  //       timer = setTimeout(fn, delay)
  //     } else {
  //       timer = setTimeout(fn, delay)
  //     }
  //   }
  // }
  // const handleScroll = () => {
  //   console.log('handleScroll')
  // }
  // window.onscroll = debounce(handleScroll, 200)

  const throttle = (fn, delay) => {
    let rest = false
    return () => {
      if (rest) {
        return false
      }
      rest = true
      setTimeout(() => {
        fn()
        rest = false
      }, delay);
    }
  }
  const handleScroll = () => {
    console.log('handleScroll')
  }
  document.getElementById('docv').onmousemove = throttle(handleScroll, 200)
    // document.getElementById('docv').onmousemove = handleScroll
</script>

</html>